@charset "utf-8";
@import "common/reset";
$font-size: 20px;
@function r($px) {
    @return $px / $font-size * 1rem;
}
html,
body {
    height: 100%;
}
.web {
    height: 100%;
    overflow: hidden;
    position: relative;
    header {
        position: absolute;
        background: #b20000;
        top: 0;
        width: 100%;
        padding: r(22px) r(17px) r(17px);
        .search {
            width: r(42px);
            height: r(42px);
            border: 2px solid white;
            border-radius: 50%;
            margin-right: r(17px);
            text-align: center;
            line-height: r(36px);
            i {
                font-size: r(27px);
                color: white;
            }
        }
        .menu {
            i {
                font-size: r(42px);
                color: white;
            }
        }
        .logo {
            text-align: center;
            overflow: hidden;
            img {
                width: r(264px);
                height: r(39px);
            }
        }
    }
    section {
        .almm {
            width: 100%;
            position: relative;
            img {
                width: 100%;
            }
            .mask {
                position: absolute;
                bottom: r(4px);
                left: 0;
                opacity: 0;
                background: rgba(0,0,0,.5);
                width: 100%;
                height: r(104px);
                transition: all 1s;
                transform: translateY(100%);
                text-align: center;
                h3 {
                    font-size: r(27px);
                    color: white;
                    padding-top: r(25px);
                    padding-bottom: r(15px);
                    overflow: hidden;
                    white-space: nowrap;
                }
                .icon {
                    margin-left: r(15px);
                    i {
                        font-size: r(18px);
                        color: white;
                        overflow: hidden;
                        white-space: nowrap;
                        &:nth-of-type(2) {
                            margin-left: r(20px);
                        }
                    }
                    span {
                        font-size: r(15px);
                        color: white;
                    }
                }
                span {
                    font-size: r(17px);
                    color: white;
                    margin-right: r(10px);
                }
                ul {
                    display: inline-block;
                    li {
                        display: inline-block;
                        width: r(10px);
                        height: r(10px);
                        background: #cebeb1;
                        border-radius: 50%;
                        &.active {
                            background: #b60005;
                        }
                        &:hover {
                            background: #b60005;
                        }
                    }
                }
            }
            &:hover {
                .mask {
                    transform: translateY(0%);
                    opacity: 1;
                }
            }
        }
        position: absolute;
        top: r(89px);
        bottom: r(110px);
        -webkit-overflow-scrolling: touch;
        overflow: auto;
        width: 100%;
        .news_list {
            padding-left: r(20px);
            padding-right: r(16px);
            li {
                padding-top: r(20px);
                padding-bottom: r(16px);
                border-bottom: 1px solid #e2e2e2;
                &::after {
                    content: "";
                    display: block;
                    clear: both;
                }
                &:last-of-type {
                    border: none;
                }
                .title_wrap {
                    width: 62%;
                    h2 {
                        font-size: r(24px);
                        color: #323232;
                    }
                    .news {
                        margin-top: r(25px);
                        text-align: right;
                        i {
                            font-size: r(18px);
                            color: #c5c5c5;
                        }
                        p {
                            display: inline-block;
                            font-size: r(20px);
                            color: #c5c5c5;
                        }
                        span {
                            font-size: r(22px);
                            color: #c5c5c5;
                        }
                    }
                }
                .img_wrap {
                    width: 35%;
                    img {
                        width: 100%;
                    }
                }
            }
        }
        .message {
            padding-left: r(20px);
            padding-right: r(16px);
            margin-top: r(35px);
            padding-bottom: r(30px);
            h3 {
                font-size: r(25px);
                color: #323232;
            }
            ul {
                width: 94.4%;
                margin: r(18px) auto r(12px);
                li {
                    display: inline-block;
                    width: 30.6%;
                    margin-right: 2%;
                    &:last-of-type {
                        margin-right: 0;
                    }
                    img {
                        width: 100%;
                    }
                }
            }
            .comment {
                img {
                    width: r(27px);
                    margin-right: r(10px);
                }
                span {
                    font-size: r(20px);
                    color: #c5c5c5;
                }
                i {
                    font-size: r(18px);
                    color: #c5c5c5;
                    margin-left: r(19px);
                }
                p {
                    color: #c5c5c5;
                }
            }
        }
        .load {
            margin-left: r(20px);
            margin-right: r(16px);
            border-top: 1px solid #e2e2e2;
            text-align: center;
            margin-top: r(10px);
            a {
                font-size: r(22px);
                color: #c5c5c5;
                padding-top: r(20px);
                margin-bottom: r(15px);
                display: inline-block;
            }
        }
    }
    footer {
        position: absolute;
        bottom: 0;
        height: r(110px);
        background: #f5f5f5;
        width: 100%;
        border-top: #bbb9ba 2px solid;
        ul {
            li {
                float: left;
                width: 20%;
                text-align: center;
                padding-top: r(16px);
                padding-bottom: r(12px);
                &.active {
                    i {
                        color: #b60005;
                    }
                    h2 {
                        color: #b60005;
                    }
                }
                //              &:hover{
                //                  i{
                //                      color: #b60005;  
                //                  }
                //                  h2{
                //                      color: #b60005;  
                //                  }
                //              }
                a {
                    i {
                        font-size: r(48px);
                        color: #8b8b8b;
                    }
                    h2 {
                        font-size: r(17px);
                        color: #8b8b8b;
                        //                     margin-top: r(10px);
                    }
                }
            }
        }
    }
    .page_search {
        width: 100%;
        height: 100%;
        position: absolute;
        background: #f1f1f1;
        -webkit-transform: translateX(100%);
        transition: transform 1s ease-in;
        animation-name: zoomOutRight;
        .search_top {
            width: 100%;
            height: r(87px);
            background: #1f1f1f;
            padding-top: r(20px);
            .cuo {
                width: r(50px);
                height: r(50px);
                background: #b60005;
                border-radius: 50%;
                text-align: center;
                line-height: r(50px);
                margin-left: r(12px);
                display: inline-block;
                i {
                    font-size: r(22px);
                    color: white;
                    vertical-align: middle;
                }
            }
            .search_box {
                border: 1px solid white;
                width: 80%;
                height: r(48px);
                display: inline-block;
                border-radius: 20px;
                margin-left: r(26px);
                i {
                    font-size: r(27px);
                    color: white;
                    margin-left: r(14px);
                }
                input {
                    width: 85%;
                    height: r(46px);
                    border: none;
                    background: transparent;
                    font-size: r(24px);
                    color: white;
                    margin-left: r(10px);
                    padding-left: r(20px);
                }
            }
        }
        h3 {
            font-size: r(27px);
            margin-left: r(30px);
            margin-top: r(32px);
        }
        ul {
            width: 94%;
            margin: 0 auto;
            li {
                display: inline-block;
                a {
                    font-size: r(28px);
                    display: inline-block;
                    background: white;
                    color: #8b8b8b;
                    padding: r(13px) r(17px);
                    margin-left: r(8px);
                    margin-top: r(10px);
                    border: 1px solid #e0e0e0;
                }
            }
        }
    }
    #search:checked + .page_search {
        transform: translateX(0%);
        animation-name: rotateInDownRight;
    }
    .page_search2 {
        width: 100%;
        height: 100%;
        position: absolute;
        background: #f1f1f1;
        -webkit-transform: translateX(100%);
        transition: transform 1s ease-in;
        .search_top {
            width: 100%;
            height: r(87px);
            background: #1f1f1f;
            padding-top: r(20px);
            .cuo {
                width: r(50px);
                height: r(50px);
                background: #b60005;
                border-radius: 50%;
                text-align: center;
                line-height: r(50px);
                margin-left: r(12px);
                display: inline-block;
                i {
                    font-size: r(22px);
                    color: white;
                    vertical-align: middle;
                    font-weight: bold;
                }
            }
            .search_box {
                border: 1px solid white;
                width: 80%;
                height: r(48px);
                display: inline-block;
                border-radius: 20px;
                margin-left: r(26px);
                i {
                    font-size: r(27px);
                    color: white;
                    margin-left: r(14px);
                }
                input {
                    width: 85%;
                    height: r(46px);
                    border: none;
                    background: transparent;
                    font-size: r(24px);
                    color: white;
                    margin-left: r(10px);
                    padding-left: r(20px);
                }
            }
        }
        .ul_sou {
            height: 100%;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: r(80px);
            ul {
                width: 94%;
                margin: 0 auto;
                background: white;
                margin-top: r(34px);
                li {
                    width: 95%;
                    margin: 0 auto;
                    padding-top: r(23px);
                    padding-bottom: r(23px);
                    h3 {
                        font-size: r(26px);
                        color: #595757;
                        span {
                            color: #b60005;
                            font-size: r(26px);
                        }
                    }
                    p {
                        font-size: r(21px);
                        color: #898989;
                        margin-top: r(23px);
                        margin-bottom: r(20px);
                    }
                    h5 {
                        font-size: r(17px);
                        color: #898989;
                        display: inline-block;
                        margin-right: r(30px);
                    }
                    span {
                        font-size: r(17px);
                        color: #898989;
                    }
                }
            }
        }
    }
    #search2:checked + .page_search2 {
        transform: translateX(0%);
    }
    .page_menu1 {
        width: 100%;
        height: 100%;
        position: absolute;
        background: #222222;
        -webkit-transform: translateX(-100%);
        transition: transform 1s ease-in;
        .logo1 {
            width: 100%;
            text-align: center;
            img {
                width: r(162px);
                margin-top: r(194px);
            }
        }
        .landing {
            width: 77%;
            margin: 0 auto;
            padding-bottom: r(100px);
            font-size: 0;
            .k {
                margin-top: r(47px);
                .border {
                    width: 12.3%;
                    height: r(53px);
                    background: #303030;
                    text-align: center;
                    display: inline-block;
                    line-height: r(52px);
                    vertical-align: middle;
                    margin-bottom: r(16px);
                    i {
                        font-size: r(30px);
                        color: #cccccc;
                        vertical-align: middle;
                    }
                }
                input {
                    width: 87%;
                    height: r(53px);
                    vertical-align: middle;
                    background: #3d3d3d;
                    border: none;
                    color: #cccccc;
                    font-size: r(20px);
                    padding-left: r(40px);
                    margin-bottom: r(16px);
                }
            }
            .forget {
                text-align: right;
                margin-top: r(20px);
                i {
                    font-size: r(19px);
                    color: #cccccc;
                }
                a {
                    font-size: r(18px);
                    color: #cccccc;
                }
            }
            .denglu {
                width: 100%;
                background: #b60005;
                margin-top: r(58px);
                height: r(53px);
                font-size: r(22px);
                color: #cdcdcd;
                display: inline-block;
                text-align: center;
                line-height: r(53px);
                input {
                    display: none;
                }
            }
            .zhuce {
                width: 100%;
                border: 1px solid #b60005;
                margin-top: r(14px);
                height: r(53px);
                background: #303030;
                font-size: r(22px);
                color: #cdcdcd;
            }
        }
    }
    #menu:checked + .page_menu1 {
        transform: translateX(0%);
    }
    .page_menu2 {
        width: 100%;
        height: 100%;
        position: absolute;
        background: #222222;
        -webkit-transform: translateX(-100%);
        transition: transform 1s ease-in;
        .search_top {
            width: 100%;
            height: r(87px);
            background: #1f1f1f;
            padding-top: r(20px);
            .cuo {
                width: r(50px);
                height: r(50px);
                background: #b60005;
                border-radius: 50%;
                text-align: center;
                line-height: r(50px);
                margin-left: r(12px);
                display: inline-block;
                i {
                    font-size: r(22px);
                    color: white;
                    vertical-align: middle;
                    font-weight: bold;
                }
            }
            .search_box {
                border: 1px solid white;
                width: 80%;
                height: r(48px);
                display: inline-block;
                border-radius: 20px;
                margin-left: r(26px);
                i {
                    font-size: r(27px);
                    color: white;
                    margin-left: r(14px);
                }
                input {
                    width: 85%;
                    height: r(46px);
                    border: none;
                    background: transparent;
                    font-size: r(24px);
                    color: white;
                    margin-left: r(10px);
                    padding-left: r(20px);
                }
            }
        }
        .personal {
            text-align: center;
            border-bottom: 24px solid #303030;
            padding-bottom: r(34px);
            .touxiang {
                position: relative;
                img {
                    width: r(130px);
                }
                .figure {
                    position: absolute;
                    width: r(33px);
                    height: r(33px);
                    background: #ff0000;
                    color: white;
                    font-size: r(16px);
                    border-radius: 50%;
                    top: 0;
                    right: r(253px);
                    vertical-align: middle;
                    line-height: r(33px);
                }
            }
            .people {
                margin-top: r(15px);
                h5 {
                    font-size: r(24px);
                    color: white;
                    display: inline-block;
                }
                a {
                    font-size: r(15px);
                    border: 1px solid white;
                    padding: r(3px) r(12px);
                    display: inline-block;
                    color: white;
                    margin-left: r(10px);
                }
            }
            ul {
                margin-top: r(8px);
                li {
                    display: inline-block;
                    margin-left: r(13px);
                    i {
                        font-size: r(20px);
                        color: #eeca02;
                    }
                }
            }
            .attention {
                font-size: r(22px);
                color: #a1a1a1;
                margin-top: r(10px);
                p {
                    display: inline-block;
                    font-size: r(24px);
                    color: white;
                    span {
                        color: #af0107;
                        font-size: r(18px);
                    }
                }
            }
            .collect {
                margin-top: r(35px);
                a {
                    padding: r(15px) r(58px);
                    color: white;
                    font-size: r(24px);
                    background: #b60005;
                    margin-left: r(20px);
                    border-radius: 30px;
                }
            }
        }
        .GIMC {
            width: 100%;
            li {
                width: 90%;
                margin: 0 auto;
//              border-bottom: 1px solid #2f2f2f;  
                margin-top: r(50px);           
                h4 {
                    vertical-align: middle;
                    font-size: r(20px);
                    color: #7f7f7f;
                }
                span {
                    vertical-align: middle;
                    font-size: r(20px);
                    color: #7f7f7f;
                    transition: transform 1s ease-in;         
                }
                .li_list{
                    width: 100%;
//                  display: block;
                    text-align: center;
                    height: 0;
                    visibility: hidden;
                    transition: all 1s ease-in;

                    h5{
                        width: r(430px);
                        font-size: r(20px);
                        color:white;
                        border-bottom: solid 1px #2f2f2f;
                        margin-bottom: r(29px);
                        line-height: r(50px);
                        margin: 0 auto;
                        &:last-of-type{
                            border-bottom: none;
                        }
                    }
                }
                &:hover .li_list{
                    display: inline;
                    visibility: visible;
                    height: 60px;
                }
                &:hover span{
                    transform: rotateZ(90deg);
                    
                }
            }
        }
        .exit{
            text-align: center;
            margin-top: r(60px);
            span{
                font-size: r(22px);
                color: white;
                padding: r(15px) r(60px);
                background: #b60005;
                border-radius: 30px;
            }
        }
    }
    #menu2:checked + .page_menu2 {
        transform: translateX(0%);
    }
}